<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识文章搜索</title>
    <style>
        :root {
            --primary: #3a86ff;
            --primary-light: #4d9eff;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-400: #9ca3af;
            --gray-600: #4b5563;
            --gray-800: #1f2937;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: var(--gray-50);
            color: var(--gray-800);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        /* 搜索区域 */
        .search-container {
            margin-bottom: 3rem;
            text-align: center;
        }
        
        .search-header {
            margin-bottom: 2rem;
        }
        
        .search-header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--gray-800);
            margin-bottom: 0.5rem;
        }
        
        .search-header p {
            color: var(--gray-600);
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .search-box {
            max-width: 700px;
            margin: 0 auto;
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 1.25rem 1.5rem;
            font-size: 1.1rem;
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .search-input:focus {
            outline: none;
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        
        .search-btn {
            position: absolute;
            right: 0.5rem;
            top: 50%;
            transform: translateY(-50%);
            background: var(--primary);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .search-btn:hover {
            background: var(--primary-light);
        }
        
        /* 内容区域 */
        .content-section {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .results-count{color:var(--gray-600);margin:0 0 1rem 0}
        .pagination{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:1.25rem}
        .page-link{display:inline-block;padding:.5rem .8rem;border:1px solid var(--gray-200);border-radius:.5rem;color:var(--gray-800);text-decoration:none}
        .page-link:hover{background:var(--gray-100)}
        .page-link.active{background:var(--primary);border-color:var(--primary);color:#fff}
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
        }
        
        .view-all {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
        }
        
        /* 文章列表 */
        .article-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem}
        .article-card {border-radius:14px;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease}
        .article-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.08)}
        .article-content{padding:1.25rem 1.25rem 1rem 1.25rem;border:1px solid var(--gray-200);border-radius:14px;background:#fff;height:100%;display:flex;flex-direction:column}
        .article-category{align-self:flex-start;display:inline-block;background:#eef2ff;color:#4f46e5;padding:.25rem .6rem;border-radius:999px;font-size:.8rem;margin-bottom:.75rem}
        .article-title{font-size:1.1rem;margin:0 0 .5rem 0;font-weight:700;color:#111827}
        .article-excerpt{color:var(--gray-600);margin:.25rem 0 1rem 0;line-height:1.6;min-height:3.2em}
        .article-meta{display:flex;gap:.75rem;align-items:center;color:#6b7280;font-size:.85rem;margin-top:auto}
        .dot{width:4px;height:4px;background:#cbd5e1;border-radius:50%}
        .read-more{margin-left:auto;color:var(--primary);text-decoration:none;font-weight:600}
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 1.5rem;
            }
            
            .search-header h1 {
                font-size: 2rem;
            }
            
            .article-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="search-container">
            <div class="search-header">
                <h1>知识文章搜索</h1>
                <p>查找您需要的技术文章和最佳实践</p>
            </div>
            <div class="search-box">
                <input type="text" class="search-input" placeholder="输入关键词搜索文章..." id="search-input" th:value="${q}">
                <button class="search-btn" id="search-btn">搜索</button>
            </div>
        </div>
        
        <div class="content-section">
            <div class="section-header">
                <h2 class="section-title" id="section-title" th:text="${isSearch} ? '搜索结果' : '热门文章'">热门文章</h2>
                <a href="#" class="view-all" id="show-all" th:if="${isSearch}">返回首页</a>
            </div>
            
            <div id="results-wrapper">
            <div id="results-count" class="results-count" th:if="${isSearch}" th:text="${'共 ' + page.totalElements + ' 条关于 “' + (q == null ? '' : q) + '” 的结果'}"></div>

            <div class="article-grid" id="article-list">
                <!-- 使用 th:block 避免额外容器，保证网格直系子元素是卡片 -->
                <th:block th:if="${page != null and page.totalElements > 0}">
                    <div class="article-card" th:each="it : ${page.content}">
                        <div class="article-content">
                            <span class="article-category" th:text="${it.category != null ? it.category : '知识'}">分类</span>
                            <h3 class="article-title" th:text="${it.title}">标题</h3>
                            <p class="article-excerpt" th:text="${#strings.abbreviate(it.plainText, 160)}">摘要</p>
                            <div class="article-meta">
                                <span th:text="${#temporals.format(it.updatedAt, 'yyyy-MM-dd HH:mm')}">时间</span>
                                <span class="dot"></span>
                                <span th:text="${it.category != null ? it.category : '未分类'}">分类</span>
                                <a class="read-more" th:href="@{'/article/' + ${it.id}}">阅读全文 →</a>
                            </div>
                        </div>
                    </div>
                </th:block>

                <!-- 空状态 -->
                <th:block th:if="${page == null or page.totalElements == 0}">
                    <div style="grid-column:1/-1;text-align:center;color:#6b7280;margin:1rem 0 1.25rem 0">暂无内容</div>
                </th:block>
            </div>

            <!-- 分页（仅在有结果时显示） -->
            <div class="pagination" th:if="${page != null and page.totalElements > 0 and page.totalPages > 1}">
                <a class="page-link" th:if="${!page.first}" th:href="@{'/search'(q=${q},page=${page.number-1},size=${page.size})}">上一页</a>
                <span th:each="i : ${#numbers.sequence(0, page.totalPages-1)}">
                    <a class="page-link" th:classappend="${i} == ${page.number} ? ' active'" th:text="${i+1}"
                       th:href="@{'/search'(q=${q},page=${i},size=${page.size})}"></a>
                </span>
                <a class="page-link" th:if="${!page.last}" th:href="@{'/search'(q=${q},page=${page.number+1},size=${page.size})}">下一页</a>
            </div>
            </div>
        </div>
    </div>

    <script>
        const input = document.getElementById('search-input');
        const resultsWrapper = document.getElementById('results-wrapper');
        async function fetchFragment(url){
            const r = await fetch(url, {headers: {'X-Requested-With':'XMLHttpRequest'}});
            const html = await r.text();
            resultsWrapper.innerHTML = html;
            // 更新标题与返回按钮
            document.getElementById('section-title').textContent = '搜索结果';
            const back = document.getElementById('show-all');
            if(back){ back.style.display = 'inline'; back.textContent = '返回首页'; }
        }
        const goSearch = () => {
            const query = input.value.trim();
            if (query) {
                const url = '/search/fragment?q=' + encodeURIComponent(query);
                fetchFragment(url);
            }
        };
        document.getElementById('search-btn').addEventListener('click', goSearch);
        input.addEventListener('keydown', function(e){ if(e.key === 'Enter'){ e.preventDefault(); goSearch(); }});
        // 拦截结果区域内的分页点击，改为AJAX
        resultsWrapper.addEventListener('click', function(e){
            const a = e.target.closest('a');
            if(!a) return;
            const href = a.getAttribute('href');
            if(href && href.startsWith('/search')){
                e.preventDefault();
                const qParam = new URL(href, window.location.origin).searchParams.get('q') || input.value.trim();
                const pageParam = new URL(href, window.location.origin).searchParams.get('page') || '0';
                const sizeParam = new URL(href, window.location.origin).searchParams.get('size') || '10';
                fetchFragment('/search/fragment?q=' + encodeURIComponent(qParam) + '&page=' + pageParam + '&size=' + sizeParam);
            }
        });

        const showAll = document.getElementById('show-all');
        if(showAll){
            showAll.addEventListener('click', function(e){ e.preventDefault(); window.location.href = '/'; });
        }
    </script>
</body>
</html>